<template>
  <div class="tabs-nav-container">
    <div class="tabs-header">
      <el-tabs 
        v-model="activeTab" 
        type="card" 
        closable 
        @tab-remove="removeTab"
        @tab-click="clickTab"
      >
        <!-- 不可关闭的首页标签 -->
        <el-tab-pane
          label="首页"
          name="/"
          :closable="false"
        >
        </el-tab-pane>
        
        <!-- 动态生成的可关闭标签 -->
        <el-tab-pane
          v-for="tab in tabs"
          :key="tab.path"
          :label="tab.title"
          :name="tab.path"
          :closable="true"
        >
        </el-tab-pane>
      </el-tabs>
      <!-- 将按钮移到el-tabs外部 -->
      <el-button 
        v-if="tabs.length > 0"  
        class="close-all-btn"
        size="small"
        @click="closeAllTabs"
        type="danger"
      >
        关闭全部
      </el-button>
    </div>
  </div>
</template>

<script setup>
/* 脚本部分保持不变 */
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const activeTab = ref('/')  // 默认激活首页
const tabs = ref([])

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    // 忽略首页，因为已经固定显示
    if (newPath === '/') {
      activeTab.value = '/'
      return
    }
    
    activeTab.value = newPath
    addTab({
      title: route.meta.title || route.name || '未命名',
      path: newPath
    })
  },
  { immediate: true }
)

// 添加标签页签（不添加首页）
function addTab(tab) {
  if (tab.path === '/') return
  
  const exists = tabs.value.some(t => t.path === tab.path)
  if (!exists) {
    tabs.value.push(tab)
  }
}

// 移除标签页签（不能移除首页）
function removeTab(targetPath) {
  if (targetPath === '/') return
  
  const index = tabs.value.findIndex(tab => tab.path === targetPath)
  if (index !== -1) {
    tabs.value.splice(index, 1)
    
    // 如果删除的是当前激活的标签，则跳转到首页
    if (activeTab.value === targetPath) {
      router.push('/')
    }
  }
}

// 点击标签页
function clickTab(tab) {
  console.log(tab)
  router.push(tab.props.name)
}

// 关闭所有标签页（保留首页）
function closeAllTabs() {
  tabs.value = []
  if (activeTab.value !== '/') {
    router.push('/')
  }
}
</script>

<style scoped>
.tabs-nav-container {
  background: #fff;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.tabs-header {
  display: flex;
  position: relative;
  width: 100%;
}

/* 调整el-tabs宽度 */
:deep(.el-tabs) {
  flex: 1;
  overflow: hidden;
  padding-right: 100px; /* 为按钮留出空间 */
}

/* 确保标签页不会溢出 */
:deep(.el-tabs__content) {
  overflow: hidden;
}

.close-all-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  z-index: 1;
}

/* 标签项样式 */
:deep(.el-tabs__item) {
  height: 36px;
  line-height: 36px;
  font-size: 13px;
}

/* 首页标签特殊样式 */
:deep(.el-tabs__item[aria-controls="pane-/"]) {
  padding: 0 20px !important;
  background-color: #f5f7fa;
}

/* 导航按钮样式 */
:deep(.el-tabs__nav-next),
:deep(.el-tabs__nav-prev) {
  line-height: 36px;
}
</style>